<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <!-- Thymeleaf方式引入 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
    <link rel="stylesheet" th:href="@{/static/css/home.css}" />
</head>
<body>
<div class="container">
    <header>
        <h1>学生信息管理系统</h1>
    </header>
    
    <nav class="tabs">
        <a href="#content1" id="student-tab" class="tab">学生管理</a>
        <a href="#content2" id="class-tab" class="tab">班级管理</a>
        <a href="#content3" id="teacher-tab" class="tab">教师管理</a>
    </nav>
    
    <section>
        <div class="tab-content">
            <!-- 学生管理面板 -->
            <div id="content1" class="content">
                <div class="panel-header">
                    <h2>学生列表</h2>
                    <button id="add-student" class="customized-button">添加学生</button>
                </div>
                <table>
                    <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>班级</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="student-list">
                    <!-- 数据动态加载 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 班级管理面板 -->
            <div id="content2" class="content">
                <div class="panel-header">
                    <h2>班级列表</h2>
                    <button id="add-class" class="customized-button">添加班级</button>
                </div>
                <table>
                    <thead>
                    <tr>
                        <th>班级ID</th>
                        <th>班级名称</th>
                        <th>年级</th>
                        <th>班主任</th>
                        <th>创建时间</th>
                    </tr>
                    </thead>
                    <tbody id="class-list">
                    <!-- 数据动态加载 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 教师管理面板 -->
            <div id="content3" class="content">
                <div class="panel-header">
                    <h2>教师列表</h2>
                    <button id="add-teacher" class="customized-button">添加教师</button>
                </div>
                <table>
                    <thead>
                    <tr>
                        <th>教师ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>入职日期</th>
                        <th>创建时间</th>
                    </tr>
                    </thead>
                    <tbody id="teacher-list">
                    <!-- 数据动态加载 -->
                    </tbody>
                </table>

            </div>
        </div>
    </section>
    
    <!-- 翻页区 -->
    <div class="pagination">
        <!-- 左翻页区 -->
        <div class="left-pagination-container">
            <button id="prevPageBtn" class="customized-button">上一页</button>
            <span id="pageInfo"></span>
            <button id="nextPageBtn" class="customized-button">下一页</button>
        </div>
        <!-- 右跳转区 -->
        <div class="right-jump-container">
            <form id="jumpForm">
                <label for="targetPage">跳转到第<input type="number" id="targetPage" class="customized-input short" min="1">页，</label>
                <label for="pageSize">每页<input type="number" id="pageSize" class="customized-input short" min="5" max="20">条数据</label>
                <button id="jump-button" class="customized-button" type="submit">跳转</button>
            </form>
        </div>
    </div>
</div>

<!-- 学生模态框 -->
<div id="student-modal" class="modal">
    <div class="modal-content">
        <span id="close-student" class="close-button">&times;</span>
        <h2>添加学生</h2>
        <form id="s-data-form">
            <!-- 姓名 -->
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" class="customized-input long" name="name" required />
            </div>
            <!-- 性别 -->
            <div class="form-group">
                <label for="gender">性别:</label>
                <select id="gender" name="gender" required>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <!-- 年龄 -->
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="number" id="age" class="customized-input middle" name="age" min="1" max="117" placeholder="可选"/>
            </div>
            <!-- 班级列表 -->
            <div id="sc-form-group" class="form-group">
                <label for="class">所属班级:</label>
                <select id="class" name="class" required>
                </select>
            </div>
            <!-- 提交按钮 -->
            <button type="submit" class="customized-button">提交</button>
        </form>
    </div>
</div>

<!-- 班级模态框 -->
<div id="class-modal" class="modal">
    <div class="modal-content">
        <span id="close-class" class="close-button">&times;</span>
        <h2>添加班级</h2>
        <form id="c-data-form">
            <!-- 班级名称 -->
            <div class="form-group">
                <label for="className">班级名称:</label>
                <input type="text" id="className" class="customized-input long" name="className" required />
            </div>
            <!-- 年级 -->
            <div class="form-group">
                <label for="grade">年级:</label>
                <input type="text" id="grade" class="customized-input long" name="grade" placeholder="可选"/>
            </div>
            <button type="submit" class="customized-button">提交</button>
        </form>
    </div>
</div>

<!-- 设置班主任模态框 -->
<div id="choose-teacher-modal" class="modal">
    <div class="modal-content">
        <span id="close-choose-teacher" class="close-button">&times;</span>
        <h2>设置班主任</h2>
        <!-- 隐藏输入字段用于存储 clazzId -->
        <input type="hidden" id="clazzIdInput" name="clazzIdInput" />
        <form id="ct-data-form">
            <div class="form-group">
                <label for="headTeacher">班主任:</label>
                <select id="headTeacher" name="headTeacher">
                    <!-- js生成选项 -->
                </select>
            </div>
            <button type="submit" class="customized-button">提交</button>
        </form>
    </div>
</div>

<!-- 教师模态框 -->
<div id="teacher-modal" class="modal">
    <div class="modal-content">
        <span id="close-teacher" class="close-button">&times;</span>
        <h2>添加教师</h2>
        <form id="t-data-form">
            <!-- 教师姓名 -->
            <div class="form-group">
                <label for="teacherName">教师姓名:</label>
                <input type="text" id="teacherName" class="customized-input long" name="teacherName" required />
            </div>
            
            <!-- 性别选择框 -->
            <div class="form-group">
                <label for="teacherGender">性别:</label>
                <select id="teacherGender" name="teacherGender" required>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            
            <!-- 入职日期选择器 -->
            <div class="form-group">
                <label for="hireDate">入职日期:</label>
                <input type="date" id="hireDate" class="customized-input long" name="hireDate" />
            </div>
            <button type="submit" class="customized-button">提交</button>
        </form>
    </div>
</div>

<!-- Thymeleaf方式引入 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript" th:src="@{/static/js/home.js}"></script>
</body>
</html>